<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/administerhome' }" class="breadCrumb"
        >首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>床位管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="bed-management-main">
      <div class="operater-bar">
        <!--输入和选择区域-->
        <div class="input-select-field">
          <div>
            <el-text class="mx-1">床位号：</el-text>
            <el-input v-model="pageInfo.bedNumber" placeholder="请输入床位号" />
          </div>
          <div>
            <el-text class="mx-1">床位状态：</el-text>
            <el-select
              v-model="pageInfo.bedStatus"
              placeholder="请选择床位状态"
              size="normal"
              :value-on-clear="null"
              clearable
            >
              <el-option
                v-for="item in bedStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <!--按钮区域-->
        <div class="btn-field">
          <el-button type="primary" @click="getbed">搜索</el-button>
          <el-button type="primary" @click="addbedShow">新增</el-button>
        </div>
      </div>
      <div class="table-field">
        <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column prop="bedId" label="序号" />
          <el-table-column prop="bedNumber" label="床位号" />
          <el-table-column prop="bedStatus" label="状态" />
          <el-table-column prop="placementTime" label="安置时间" />
          <el-table-column prop="remarks" label="备注" />
          <el-table-column prop="operator" label="操作" width="200">
            <template #default="scope">
              <el-button
                v-if="scope.row.bedStatus === '有人'"
                type="primary"
                @click="detailshow(scope.row.bedNumber)"
              >
                详情
              </el-button>
              <el-button
                v-else="scope.row.bedStatus === '空闲'"
                type="success"
                @Click="bindbedShow(scope.row)"
              >
                分配
              </el-button>
              <el-button type="danger" @Click="deletebed(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="pageInfo.pageNum"
          v-model:page-size="pageInfo.pageSize"
          background
          :page-sizes="[2, 3, 5, 10]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="handleSizeChange"
          @size-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <el-dialog
      v-model="addDialogVisible"
      title="新增床位"
      width="50%"
      @closed="addDialogClosed"
    >
      <el-form
        label-position="right"
        :model="addForm"
        label-width="90px"
        status-icon
      >
        <el-row>
          <el-form-item label="床位号" prop="bedNumber">
            <el-input v-model="addForm.bedNumber" type="text"></el-input>
          </el-form-item>
          <el-form-item label="床位状态" prop="bedStatus">
            <el-radio-group v-model="addForm.bedStatus">
              <el-radio value="0">空闲</el-radio>
              <el-radio value="1">有人</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="安置时间" prop="placementTime">
            <el-date-picker
              v-model="addForm.placementTime"
              type="datetime"
              placeholder="Pick a day"
              size="default"
            />
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="addForm.remarks" type="text"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogClosed" class="buttonClass" color="red"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="addBed"
            class="buttonClass"
            :bg="true"
          >
            确 定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="bindDialogVisible" title="绑定老人" width="50%">
      <el-table :data="eldertableData" border stripe style="width: 100%">
        <el-table-column prop="eldId" label="序号" />
        <el-table-column prop="eldName" label="姓名" />
        <el-table-column prop="eldAge" label="年龄" />
        <el-table-column prop="eldPhone" label="电话" />
        <el-table-column prop="eldHealth" label="健康状态" />
        <el-table-column prop="operator" label="操作" width="200">
          <template #default="scope">
            <el-button type="success" @click="bindElder(scope.row)">
              分配
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog v-model="detailsDialogVisible" title="床位老人详情" width="70%">
      <el-descriptions
        class="margin-top"
        :column="3"
        :size="size"
        :model="elderShowData"
        border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">姓名</div>
          </template>
          <div class="cell-item">{{ elderShowData.eldName }}</div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">性别</div>
          </template>
          <div class="cell-item">{{ elderShowData.eldGender }}</div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">年龄</div>
          </template>
          <div class="cell-item">{{ elderShowData.eldAge }}</div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">身份证号</div>
          </template>
          <div class="cell-item">{{ elderShowData.eldIdNum }}</div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">电话</div>
          </template>
          <div class="cell-item">{{ elderShowData.eldPhone }}</div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">健康状态</div>
          </template>
          <div class="cell-item">{{ elderShowData.eldHealth }}</div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">入住时间</div>
          </template>
          <div class="cell-item">{{ elderShowData.eldIntime }}</div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import * as bed from "@/api/bed.js";

const tableData = ref([]);
const eldertableData = ref([]);
const elderShowData = ref([]);

let addDialogVisible = ref(false);
let bindDialogVisible = ref(false);
let detailsDialogVisible = ref(false);

const addForm = reactive({
  bedNumber: "",
  bedStatus: "",
  placementTime: "",
  remarks: "",
});

function resetForm(formRef) {
  if (!formRef) return;
  formRef.value.resetFields();
}
const addDialogClosed = () => {
  addDialogVisible.value = false;
  resetForm(addForm);
};
const addbedShow = () => {
  addDialogVisible.value = true;
};
const rowdetails = ref({});
const bindbedShow = (row) => {
  rowdetails.value = JSON.parse(JSON.stringify(row));
  bindDialogVisible.value = true;
  getelder();
};

const bedStatusOptions = [
  {
    value: 1,
    label: "有人",
  },
  {
    value: 0,
    label: "空闲",
  },
];

const total = ref(10);
const handleSizeChange = () => {
  getbed();
};
const handleCurrentChange = () => {
  getbed();
};
const pageInfo = reactive({
  pageNum: 1,
  pageSize: 10,
  bedNumber: "",
  bedStatus: "",
});

const getbed = () => {
  const getInfo = reactive({
    currentPage: pageInfo.pageNum,
    pageSize: pageInfo.pageSize,
    bedNumber: pageInfo.bedNumber,
    bedStatus: pageInfo.bedStatus,
  });
  bed.getBedByPageAPI(getInfo).then((resp) => {
    if (resp.data.code !== 2000) {
      ElMessage({
        type: "error",
        message: resp.data.message,
      });
      return;
    }
    total.value = resp.data.total;
    tableData.value = resp.data.data.map((item) => ({
      bedId: item.bedId,
      bedNumber: item.bedNumber,
      bedStatus: item.bedStatus === 0 ? "空闲" : "有人",
      placementTime: item.placementTime,
      remarks: item.remarks,
    }));
  });
};

const getelder = () => {
  bed.getelderAPI().then((resp) => {
    if (resp.data.code !== 2000) {
      ElMessage({
        type: "error",
        message: resp.data.message,
      });
      return;
    }
    total.value = resp.data.total;
    eldertableData.value = resp.data.data;
    console.log(resp.data.data);
  });
};

const bindElder = (row) => {
  const data = reactive({
    bedNumber: rowdetails.value.bedNumber,
    eldId: row.eldId,
  });
  const modstatusdata = reactive({
    bedId: rowdetails.value.bedId,
  });
  bed.bindelderAPI(data).then((resp) => {
    if (resp.data.code === 2000) {
      bed.modbedstatusAPI(modstatusdata).then((res) => {
        if (res.data.code === 2000) {
          ElMessage({
            type: "success",
            message: res.data.message,
          });
          bindDialogVisible.value = false;
          getbed();
        }
      });
    }
  });
};
const addBed = () => {
  console.log(addForm);
  bed.addBedAPI(addForm).then((response) => {
    //新增失败
    if (response.data.code !== 2000) {
      ElMessage.error(response.data.message);
      return;
    }
    //新增成功
    ElMessage({
      message: response.data.message,
      type: "success",
    });
    addDialogVisible.value = false;
    //获取分页
    getbed();
  });
};

const detailshow = (bedNumber) => {
  const bedNumberdata = reactive({
    bedNumber: bedNumber,
  });
  detailsDialogVisible.value = true;
  bed.getelderBybedNumberAPI(bedNumberdata).then((resp) => {
    if (resp.data.code !== 2000) {
      ElMessage({
        type: "error",
        message: resp.data.message,
      });
    }
    elderShowData.value = {
      eldName: resp.data.data.eldName,
      eldGender: resp.data.data.eldGender,
      eldAge: resp.data.data.eldAge,
      eldIdNum: resp.data.data.eldIdNum,
      eldPhone: resp.data.data.eldPhone,
      eldHealth: resp.data.data.eldHealth ? "健康" : "亚健康",
      eldIntime: resp.data.data.eldIntime,
    };
  });
};
const deletebed = (row) => {
  if (row.bedStatus === "有人") {
    ElMessage({
      type: "error",
      message: "非空床位不能删除",
    });
    return;
  }
  bed.deletebedAPI({ bedId: row.bedId }).then((resp) => {
    if (resp.data.code === 2000) {
      ElMessage({
        type: "success",
        message: resp.data.message,
      });
      getbed();
    }
  });
};

onMounted(() => {
  getbed();
});
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 15px;
}

.bed-management-main {
  width: 1175px;
  height: 575px;
}

.operater-bar {
  width: 100%;
  flex-direction: row;
  display: flex;
}

.input-select-field {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 750px;
}

.table-field {
  width: 100%;
  margin-top: 15px;
}

.el-input {
  width: 150px;
}

.el-select {
  width: 150px;
}

.btn-field {
  width: 350px;
  display: flex;
  justify-content: flex-end;

  > .el-button {
    margin-left: 10px;
    margin-right: 10px;
  }
}
.el-pagination {
  margin-top: 15px;
}
.cell-item {
  display: flex;
  align-items: center;
}
</style>
